<!-- 页面管理器 用于跳转使用 -->
<!--
数据
{
   projectUuid:"2c9fe31d79d0fba10179d0fea5be0000",
   pageUuid:"2c9fe31d79d0fba10179d0fea5be0000",
}
-->

<template>
    <el-form class="mc-page" size="mini">
        <el-form-item>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        </el-form-item>
        <el-form-item>
            <el-row>
                <el-col :span="23">
                    <el-tree node-key="uuid" ref="selectTree" :data="treeList" default-expand-all style="overflow-y:scroll;"
                        :style="{maxHeight:maxHeight}"
                        :filter-node-method="filterNode" :highlight-current="true"
                        @node-click="handleNodeClick" :props="defaultProps"></el-tree>
                </el-col>
                <el-col :span="1"><i style="cursor: pointer;" @click="resetChoose" class="el-icon-delete"></i></el-col>
            </el-row>
        </el-form-item>
    </el-form>
</template>

<script>
import request from '../utils/request';
export default {
    name: 'mc-page',
    data () {
        return {
            treeList:[],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            filterText:""
        }
    },
    props:{
      projectUuid:{type:String,default:null},
      pageUuid:{type:String,default:null},
      maxHeight:{type:String,default:"300px"},
    },
    watch: {
      filterText(val) {
        this.$refs.selectTree.filter(val);
      },
      pageUuid(val){
        this.autoChooseNode(val)
      }
    },
    mounted () {
       var _t = this;
       request.axios({$vue:_t,method:"get",url:"magical_lowcode/user/page/project",params:{projectUuid:_t.projectUuid}}).then(function(res) {
           _t.treeList = [res.data];
           _t.$nextTick(() => {
             _t.autoChooseNode(_t.pageUuid);
           })
       }).catch(function (error) {
           console.log(error)
       });
    },
    methods:{
        //自动聚焦
        autoChooseNode(uuid){
            this.$refs.selectTree.setCurrentKey(uuid);
        },
        filterNode(value, data) {
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },
        clickCurrentNode:function(){
             var data = this.$refs.selectTree.getCurrentNode();
             var node = this.$refs.selectTree.getNode(data);
             this.handleNodeClick(data,node);
        }
        ,
        handleNodeClick:function(data,node){
            if(node.level==1 || node.dir){
                return;//项目名 目录点击都不用管
            }
            var uuid = data.uuid;
            this.$emit("choose",this.projectUuid,uuid);
        },
        resetChoose(){
            this.$nextTick(() => {
            //记忆功能 可能会找不到 导致报错
                this.$refs.selectTree.setCurrentKey(null);
                this.$emit("choose",this.projectUuid,"");
           })
        }
    }
}
</script>

<style lang="scss">
.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #409eff;
  color: white;
}
.el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #409eff !important;
  color: white;
}
</style>

